<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.5、节点的常用属性和方法</title>
    <script>
        function fun() {
            let label = document.getElementById("label");
            let input = document.getElementById("input");
            // alert(label);      // [object HTMLLabelElement] 它就是 dom 对象
            // alert(input);    // [object HTMLInputElement] 它就是 dom 对象

            // alert(label.innerText);  // 姓名
            // alert(label.innerHTML);  // <b>姓名：</b>

            // label.innerText = "<strong>姓名111:</strong>";
            label.innerHTML = "<strong>姓名222:</strong>";

            input.value = "输入姓名333";
        }

        window.onload = fun;
        // 1.方法：
        // getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
        // appendChild( oChildNode ) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
        // 2.属性：
        // childNodes 属性，获取当前节点的所有子节点
        // firstChild 属性，获取当前节点的第一个子节点
        // lastChild 属性，获取当前节点的最后一个子节点
        // parentNode 属性，获取当前节点的父节点
        // nextSibling 属性，获取当前节点的下一个节点
        // previousSibling 属性，获取当前节点的上一个节点
        // className 用于获取或设置标签的
        // class 属性值
        // innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
        // innerText 属性，表示获取/设置起始标签和结束标签中的文本
    </script>
</head>
<body>
<label id="label"><b>姓名：</b></label>
<input id="input" value="输入姓名"/>
</body>
</html>